
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>过滤器 - vue.js</title>
        <meta charset="utf-8">
        <meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <!-- <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Source+Code+Pro|Dosis:300,500' rel='stylesheet' type='text/css'> -->
        <link rel="icon" href="/images/logo.png" type="image/x-icon">
        <script>
            window.PAGE_TYPE = "api"
        </script>
        <link rel="stylesheet" href="/css/page.css" type="text/css">
        <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46852172-1', 'vuejs.org');
  ga('send', 'pageview');
</script>
        <script src="/js/vue.js"></script>
    </head>
    <body>
        <div id="mobile-bar">
            <a class="menu-button"></a>
            <a class="logo" href="/"></a>
        </div>
        
            <div id="header">
    <a id="logo" href="/">
        <img src="/images/logo.png">
        <span>Vue.js</span>
    </a>
    <ul id="nav">
        <li>
  <form id="search-form">
    <input type="text" id="search-query" class="st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link">教程</a></li>
<li><a href="/api/" class="nav-link current">API</a></li>
<li><a href="/examples/" class="nav-link">示例</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>

    </ul>
</div>
            <div id="main">
                
                    
    <div class="sidebar">
    <ul class="main-menu">
        <li>
  <form id="search-form">
    <input type="text" id="search-query" class="st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link">教程</a></li>
<li><a href="/api/" class="nav-link current">API</a></li>
<li><a href="/examples/" class="nav-link">示例</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li><a href="https://github.com/yyx990803/vue" target="_blank" class="nav-link">GitHub</a></li>

    </ul>
    <div class="list">
        <h2>Api</h2>
        <ul class="menu-root">
            
                <li>
                    <a href="/api/index.html" class="sidebar-link">概述</a>
                </li>
            
                <li>
                    <a href="/api/options.html" class="sidebar-link">组件选项</a>
                </li>
            
                <li>
                    <a href="/api/instance-properties.html" class="sidebar-link">实例属性</a>
                </li>
            
                <li>
                    <a href="/api/instance-methods.html" class="sidebar-link">实例方法</a>
                </li>
            
                <li>
                    <a href="/api/global-api.html" class="sidebar-link">全局 API</a>
                </li>
            
                <li>
                    <a href="/api/directives.html" class="sidebar-link">指令</a>
                </li>
            
                <li>
                    <a href="/api/filters.html" class="sidebar-link current">过滤器</a>
                </li>
            
                <li>
                    <a href="/api/elements.html" class="sidebar-link new">特殊元素</a>
                </li>
            
            <li><a href="http://legacy.vuejs.org">旧版 0.11 文档</a></li>
            <li style="margin:10px 0 3px">
              <script data-gittip-username="yyx990803"
                data-gittip-widget="button"
                src="//gttp.co/v1.js"></script>
            </li>
        </ul>
    </div>
</div>


<div class="content api with-sidebar">
    <h1>过滤器</h1>
    <div id="ad">
        <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script>
    </div>
    <h3 id="capitalize">capitalize</h3><p><em>‘abc’ =&gt; ‘Abc’</em></p>
<h3 id="uppercase">uppercase</h3><p><em>‘abc’ =&gt; ‘ABC’</em></p>
<h3 id="lowercase">lowercase</h3><p><em>‘ABC’ =&gt; ‘abc’</em></p>
<h3 id="currency">currency</h3><ul>
<li>接受一个可选参数</li>
</ul>
<p><em>12345 =&gt; $12,345.00</em></p>
<p>你可以传递一个可选参数来表示货币符号（默认为 $）。</p>
<h3 id="pluralize">pluralize</h3><ul>
<li>要求至少一个参数</li>
</ul>
<p>将值转为复数。如果只有一个参数，复数形式只是在末尾添加一个 “s”。如果有多个参数，参数列表对应于 1 个，2 个，3 个 … 。如果参数的个数不够，将使用最后一项。</p>
<p><strong>示例：</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123;count&#125;&#125; &#123;&#123;count | pluralize 'item'&#125;&#125;</span><br></pre></td></tr></table></figure>
<p><em>1 =&gt; ‘1 item’</em><br><em>2 =&gt; ‘2 items’</em></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;&#123;date&#125;&#125;&#123;&#123;date | pluralize 'st' 'nd' 'rd' 'th'&#125;&#125;</span><br></pre></td></tr></table></figure>
<p>结果为:</p>
<p><em>1 =&gt; ‘1st’</em><br><em>2 =&gt; ‘2nd’</em><br><em>3 =&gt; ‘3rd’</em><br><em>4 =&gt; ‘4th’</em><br><em>5 =&gt; ‘5th’</em></p>
<h3 id="json">json</h3><ul>
<li>接受一个可选参数</li>
</ul>
<p>使用 <code>JSON.stringify()</code> 来处理传入的值，而不是直接将其字符串化（如 <code>[object Object]</code>)。接受一个可选参数来指定缩进级别（默认是 2）。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">pre</span>&gt;</span>&#123;&#123;$data | json 4&#125;&#125;<span class="tag">&lt;/<span class="title">pre</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="key">key</h3><ul>
<li>只能和 <code>v-on</code> 指令协同使用</li>
<li>要求至少一个参数</li>
</ul>
<p>包装事件处理器，只有当 keyCode 等于参数时才调用它。对于一些常用的键也可以用字符串形式的别名：</p>
<ul>
<li>enter</li>
<li>tab</li>
<li>delete</li>
<li>esc</li>
<li>up</li>
<li>down</li>
<li>left</li>
<li>right</li>
<li>space</li>
</ul>
<p><strong>示例：</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">input</span> <span class="attribute">v-on</span>=<span class="value">"keyup:doSomething | key 'enter'"</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>只有按回车键 (enter) 时才会调用 <code>doSomething</code>。</p>
<h3 id="debounce_(防反跳)">debounce (防反跳)</h3><ul>
<li>只能和 <code>v-on</code> 指令协同使用</li>
<li>可以附带一个可选参数</li>
</ul>
<p>将响应函数包装为 X 毫秒之后防反跳，X 就是这个参数，默认值是 300ms。一个防反跳的响应函数会延迟到这个调用之后 X 毫秒执行，如果响应函数在延迟执行之前再次被调用，则延迟时间会被重置为 X 毫秒。</p>
<h3 id="filterBy">filterBy</h3><p><strong>语法：</strong> <code>filterBy searchKey [in dataKey...]</code>.</p>
<ul>
<li>只能和数组协同使用</li>
</ul>
<p>返回原数组过滤后的结果。<code>searchKey</code> 参数是当前 ViewModel 的一个属性名。这个属性的值会被用作查找的目标：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">input</span> <span class="attribute">v-model</span>=<span class="value">"searchText"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">li</span> <span class="attribute">v-repeat</span>=<span class="value">"users | filterBy searchText"</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>当使用此过滤器时，将递归遍历 <code>users</code> 数组的每一个元素来寻找 <code>searchText</code> 的当前值从而过滤该数组。举例来说，如果一个条目是 <code>{ name: &#39;Jack&#39;, phone: &#39;555-123-4567&#39; }</code>，而 <code>searchText</code> 的值是 <code>&#39;555&#39;</code>，这个条目就被认为是符合条件。</p>
<p>你也可以通过可选的 <code>in dataKey</code> 参数来指定具体要在哪个属性中进行查找：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">input</span> <span class="attribute">v-model</span>=<span class="value">"searchText"</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">li</span> <span class="attribute">v-repeat</span>=<span class="value">"user in users | filterBy searchText in 'name'"</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>现在只有当 <code>name</code> 属性包含 <code>searchText</code> 时这个条目才符合条件。所以当 <code>searchText</code> 的值是 <code>&#39;555&#39;</code> 时这个条目将不符合条件，而当值是 <code>&#39;Jack&#39;</code> 时则符合。</p>
<blockquote>
<p>0.12.11 更新</p>
</blockquote>
<p>从 0.12.11 开始你可以传入多个数据的键名：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">li</span> <span class="attribute">v-repeat</span>=<span class="value">"user in uers | filterBy searchText in 'name' 'phone'"</span>&gt;</span><span class="tag">&lt;/<span class="title">li</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>或者以数组形式传入一个动态的参数：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- fields = ['fieldA', 'fieldB'] --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">v-repeat</span>=<span class="value">"user in users | filterBy searchText in fields"</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>或者直接传入一个自定义过滤函数：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">div</span> <span class="attribute">v-repeat</span>=<span class="value">"user in users | filterBy myCustomFilterFunction"</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h3 id="orderBy">orderBy</h3><p><strong>语法：</strong> <code>orderBy sortKey [reverseKey]</code>.</p>
<ul>
<li>只能和数组协同使用</li>
</ul>
<p>返回原数组排序后的结果。<code>sortKey</code> 参数是当前 ViewModel 的一个属性名。这个属性的值表示用来排序的键名。可选的 <code>reverseKey</code> 参数也是当前 ViewModel 的一个属性名，如果这个属性值为真则数组会被倒序排列。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">li</span> <span class="attribute">v-repeat</span>=<span class="value">"user in users | orderBy field reverse"</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">new</span> Vue(&#123;</span><br><span class="line">  <span class="comment">/* ... */</span></span><br><span class="line">  data: &#123;</span><br><span class="line">    field: <span class="string">'name'</span>,</span><br><span class="line">    reverse: <span class="literal">false</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>你可以使用引号来表示字面量的排序键名。使用 <code>-1</code> 来表示字面量的 <code>reverse</code> 参数。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="title">ul</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="title">li</span> <span class="attribute">v-repeat</span>=<span class="value">"user in users | orderBy 'name' -1"</span>&gt;</span>&#123;&#123;name&#125;&#125;<span class="tag">&lt;/<span class="title">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="title">ul</span>&gt;</span></span><br></pre></td></tr></table></figure>

    <div class="footer">发现了问题或想要贡献？来 Github 给 Vue.js <a href="https://github.com/vuejs/vuejs.org" target="_blank">英文站点</a>或<a href="https://github.com/Jinjiang/vuejs.org/tree/lang-zh" target="_blank">中文翻译</a>来个 Fork 吧！</div>
</div>
                
            </div>
            <script src="/js/smooth-scroll.min.js"></script>
            <script src="/js/common.js"></script>
        

        <script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script><script src="https://cdn.jsdelivr.net/gh/shentao/vuejs-outdated-docs-modal@v1.3/prompt.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        </script>
    </body>
</html>
